<template>
  <div>
      <h3>我是app.vue</h3>
      <p>app里的p</p>
      <button @click="fn">给obj动态添加height属性</button>
      <p>{{ obj }}</p>

      <!-- vue2里无法通过下标去修改元素，修改了数据会变，但是界面不会触发更新 -->
      <!-- <button @click="list[0] = 999">修改下标0</button> -->
      <!-- 使用$set解决 -->
      <button @click="$set(list,0, 999)">修改下标0</button>
      <ul>
        <li v-for="(item,index) in list" :key="index">{{ item }}</li>
      </ul>

      <!-- 会触发界面更新 -->
      <button @click="list2[0].name='rose'">修改下标0</button>
      <ul>
        <li v-for="item in list2" :key="item.id">
          {{ item }}
        </li>
      </ul>

      <son />
  </div>
</template>

<script>
import son from './components/son.vue'
export default {
  components: {
    son,
  },
  data() {
    return {
      obj: {
        name: 'jack',
        age: 16
      },
      list: [
        10,20,30,40
      ],

      list2: [
        { id:1, name:'jack',age: 16 },
        { id:2, name:'jack2',age: 14 },
        { id:3, name:'jack3',age: 18 },
      ]
    }
  },
  methods: {
    fn () {
      // vue2里无法让对象动态添加的属性具备响应式
      // 也就是说动态添加的属性不会触发界面更新
      // this.obj.height = 175

      // vue2也提供了解决方法：使用$set来解决
      // 参数1：对象名
      // 参数2：要动态添加的属性名
      // 参数3：属性值
      // vue3里面没有$set了
      this.$set(this.obj, 'height', 175)
    }
  }
}
</script>

<style scoped>
/*
  加了scoped只能让当前组件写过的标签有效果
  没在当前组件里写的标签没效果
  所以意味着，它不能作用到组件内部的标签
*/

/* 所以如果此时我想把这个h3作用到组件的内部 */
/* 
    就要用深度作用选择器，也叫样式穿透
      >>>
      /deep/
      ::v-deep （推荐）

    用法：
      ::v-deep 选择器 
        中间一定要有空格
 */
::v-deep h3 {
  color: red;
}

p {
  color: orange;
}
</style>